<template>
    <view class="i-class i-load-more">
        <view class="i-load-more-loading"></view>
        <view class="i-load-more-tip">
            <view>{{ tip }}</view>
            <!--<view>正在加载</view>-->
            <!--<view class="i-load-more-empty" v-if="tip === '' && !loading"></view>-->
        </view>
    </view>
</template>

<script>
    export default {
        name: "loadMore",
        props: {
            loading: {
                type: Boolean,
                value: true
            },
            tip: {
                type: String,
                value: ''
            }
        }
    }
</script>

<style scoped>
    .i-load-more {
        width: 55%;
        margin: 0 auto;
        line-height: 1.6em;
        font-size: 14px;
        text-align: center;
    }

    .i-load-more-loading {
        display: inline-block;
        margin-right: 12px;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        background: 0 0;
        border-radius: 50%;
        border: 2px solid #e9eaec;
        border-color: #e9eaec #e9eaec #e9eaec #999;
        animation: btn-spin 0.6s linear;
        animation-iteration-count: infinite;
    }

    .i-load-more-tip {
        display: inline-block;
        vertical-align: middle;
        color: #999;
        font-size: 24rpx
    }

    .i-load-more-line {
        /* border-top: 1px solid #dddee1; */
        display: flex;
        border-top: 0;
    }

    .i-load-more-line::before {
        position: relative;
        top: -1px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        content: '';
        border-top: 1px solid #dddee1;
    }

    .i-load-more-line::after {
        position: relative;
        top: -1px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        content: '';
        border-top: 1px solid #dddee1;
    }

    .i-load-more-line .i-load-more-tip {
        position: relative;
        top: -.9em;
        padding: 0 0.55em;
        font-size: 24rpx;
        color: #999
    }

    .i-load-more-empty {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #e5e5e5;
        display: inline-block;
        position: relative;
        vertical-align: 0;
        top: -.16em;
    }

    @keyframes btn-spin {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>